<article>
  <p>提供工作或动作的实时反馈，只用简单且灵活的进度条。</p>
  <p>进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer
  9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。</p>
</article>

<section>
  <header><h3>基本类型</h3></header>
  <article>
    <table class="table col-md-12">
      <tbody>
        <tr>
          <th width="40%">进度条</th>
          <th>描述</th>
        </tr>
        <tr>
          <td>
            <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                <span class="sr-only">40% Complete (success)</span>
              </div>
            </div>
          </td>
          <td>默认的进度条</td>
        </tr>
      </tbody>
    </table>
  </article>
</section>

<section>
  <header><h3>颜色主题</h3></header>
  <article>
    <p>为了一致的样式，进度条颜色使用与按钮相同的类。</p>
    <table class="table col-md-12">
      <tbody><tr>
        <th width="40%">进度条</th>
        <th>描述</th>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
              <span class="sr-only">40% Complete (success)</span>
            </div>
          </div>
        </td>
        <td>主要/默认</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
              <span class="sr-only">40% Complete (success)</span>
            </div>
          </div>
        </td>
        <td>信息</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
              <span class="sr-only">40% Complete (success)</span>
            </div>
          </div>
        </td>
        <td>成功</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
              <span class="sr-only">60% Complete (warning)</span>
            </div>
          </div>
        </td>
        <td>警告</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
            <span class="sr-only">80% Complete (danger)</span>
            </div>
          </div>
        </td>
        <td>危险</td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
              <span class="sr-only">40% Complete (success)</span>
            </div>
          </div>
        </td>
        <td>成功</td>
      </tr>
    </tbody></table>
  </article>
</section>

<section>
  <header><h3>特殊效果</h3></header>
  <article>
    <p>用一个渐变可以创建条纹效果，在IE8中不可用。</p>
    <table class="table col-md-12">
      <tbody><tr>
        <th width="40%">进度条</th>
        <th>描述</th>
      </tr>
      <tr>
        <td>
          <div class="progress progress-striped">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
              <span class="sr-only">40% Complete (success)</span>
            </div>
          </div>
        </td>
        <td>条纹效果</td>
      </tr>
      <tr>
        <td>
          <div class="progress progress-striped active">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
              <span class="sr-only">45% Complete</span>
            </div>
          </div>
        </td>
        <td><p>运动效果。给<code>.progress-striped</code>加上<code>.active</code>使它由右向左运动。在IE的所有版本不可用。</p></td>
      </tr>
      <tr>
        <td>
          <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 35%">
              <span class="sr-only">35% Complete (success)</span>
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%">
              <span class="sr-only">20% Complete (warning)</span>
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 10%">
              <span class="sr-only">10% Complete (danger)</span>
            </div>
          </div>
        </td>
        <td><p>堆叠效果。把多个进度条放入同一个<code>.progress</code>，使它们堆叠。</p></td>
      </tr>
    </tbody></table>
  </article>
</section>
